<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>"航行有你"用户&&航班管理系统</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/public.css"/>

    <link rel="stylesheet" type="text/css" href="css/s.css"/>
    <script src="js/wrap.js" type="text/javascript"></script>

    <style>
        h1 {
            font-size: 5em; /* 将字体大小设置为5em，你可以根据需要调整这个值 */
        }
        h2 {
            font-size: 2em; /* 将字体大小设置为5em，你可以根据需要调整这个值 */
        }
    </style>
    <script>
        function confirmDelete(flightId) {
            var userConfirmed = confirm("你确定要删除信息吗？");
            if (userConfirmed) {
                window.location.href = "/deleteUser?id=" + flightId;
            }
        }
    </script>

    <script type="text/javascript">
        // js无缝滚动代码
        function marquee(i, direction) {
            var obj = document.getElementById("marquee" + i);
            var obj1 = document.getElementById("marquee" + i + "_1");
            var obj2 = document.getElementById("marquee" + i + "_2");
            if (direction === "up") {
                if (obj2.offsetTop - obj.scrollTop <= 0) {
                    obj.scrollTop = obj1.offsetHeight;
                } else {
                    obj.scrollTop++;
                }
            } else {
                if (obj2.offsetWidth - obj.scrollLeft <= 0) {
                    obj.scrollLeft = obj1.offsetWidth;
                } else {
                    obj.scrollLeft++;
                }
            }
        }

        function marqueeStart(i, direction) {
            var obj = document.getElementById("marquee" + i);
            var obj1 = document.getElementById("marquee" + i + "_1");
            var obj2 = document.getElementById("marquee" + i + "_2");
            obj2.innerHTML = obj1.innerHTML;
            var marqueeVar = setInterval(function() { marquee(i, direction); }, 20);
            obj.onmouseover = function() {
                clearInterval(marqueeVar);
            };
            obj.onmouseout = function() {
                marqueeVar = setInterval(function() { marquee(i, direction); }, 20);
            };
        }
    </script>
</head>
<body>
<!--头部-->
<header class="publicHeader">
    <h1>"航行有你"用户信息管理页面</h1>
    <div class="publicHeaderR">
        <p><span></span><span style="color: #fff21b"> ${username} , 欢迎您！</span></p>
        <a href="index.jsp">退出</a>
    </div>
</header>
<!--时间-->
<!--<section class="publicTime">-->
<!--<span id="time">2015年1月1日 11:11  星期一</span>-->
<!--</section>-->
<!--主体内容-->
<section class="publicMian ">
    <div class="left">
        <h2 class="leftH2"><span class="span1"></span>功能列表<span></span></h2>
        <nav>
            <ul class="list">
                <li  ><a href="/selectFlightServlet">航班信息管理</a></li>
                <li id="active"><a href="/selectUserServlet">用户信息</a></li>
                <li><a href="info.jsp">消息通知</a></li>
                <li><a href="password.jsp">密码修改</a></li>
                <li><a href="index.jsp">退出系统</a></li>
            </ul>
        </nav>
    </div>
    <div class="right">
        <div class="location">
            <strong>你现在所在的位置是:</strong>
            <span>>功能列表>>用户信息管理页面</span>
        </div>
        <div class="search">
            <form action="/selectUserServlet" method="post">
                <%--            <span>地点：</span>--%>
                <%--                <input type="text" name="destination" placeholder="请输入航班地点"/>--%>

                <span>用户id：</span>
                <input  type="text" name="id" placeholder="请输入用户id："/>

                <input width="10px" type="submit" value="查询"/>
            </form>

        </div>

        <!--账单表格 样式和供应商公用-->
        <table class="providerTable" cellpadding="0" cellspacing="0">
            <tr class="firstTr">
                <th width="10%">序号</th>
                <th width="10%">姓名</th>
                <th width="10%">性别</th>
                <th width="10%">年龄</th>
                <th width="10%">电话号</th>
                <th width="10%">住址</th>
                <th width="10%">工作</th>

                <th width="10%">操作</th>
            </tr>
            <c:forEach items="${allUsers}" var="user">
                <tr align="center">

                    <td>${user.id}</td>
                    <td>${user.username}</td>
                    <td>${user.gender}</td>
                    <td>${user.age}</td>
                    <td>${user.tel}</td>
                    <td>${user.address}</td>
                    <td>${user.job}</td>

                    <td>
                        <!-- 注意：这里的链接和脚本应该与用户相关，而不是航班 -->

                        <!-- 假设有一个确认删除的JavaScript函数，并且URL是正确的 -->
                        <a onclick="confirmDelete(${user.id})" href="/deleteUser?id=${user.id}" class="removeBill"><img src="img/schu.png" alt="删除" title="删除"/></a>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>
</section>


<!--点击删除按钮后弹出的页面-->

<div class="new_prod">
    <div class="tittle_z">
        <h1>🛫🛬</h1>
        <!-- 循环滚动的字幕脚本 -->
        <script type="text/javascript">
            //js无缝滚动代码
            function marquee(i,direction){
                var obj=document.getElementById("marquee"+i);
                var obj1=document.getElementById("marquee"+i+"_1");
                var obj2=document.getElementById("marquee"+i+"_2");
                if(direction == "up"){
                    if(obj2.offsetTop-obj.scrollTop<=0){
                        obj.scrollTop-=(obj1.offsetHeight+20);
                    }else{
                        var tmp=obj.scrollTop;
                        obj.scrollTop++;
                        if(obj.scrollTop==tmp){
                            obj.scrollTop=1
                        }
                    }
                }else{
                    if(obj2.offsetWidth-obj.scrollLeft<=0){
                        obj.scrollLeft-=obj1.offsetWidth;
                    }else{
                        obj.scrollLeft++;
                    }
                }
            }
            function marqueeStart(i,direction){
                var obj=document.getElementById("marquee"+i);
                var obj1=document.getElementById("marquee"+i+"_1");
                var obj2=document.getElementById("marquee"+i+"_2");
                obj2.innerHTML=obj1.innerHTML;
                var marqueeVar=window.setInterval("marquee("+i+",'"+direction+"')",20);
                obj.onmouseover=function(){
                    window.clearInterval(marqueeVar);
                }
                obj.onmouseout=function(){
                    marqueeVar=window.setInterval("marquee("+i+",'"+direction+"')",20);
                }
            }
        </script>
        <div class="warp_sp">
            <div id="marquee1" class="marqueeleft">
                <div style="width: 8000px;">
                    <ul id="marquee1_1">
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="img/1.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="img/2.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic" >
                                <img width="290" height="180" src="img/3.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="img/4.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic" >
                                <img width="290" height="180" src="img/5.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="img/6.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic" >
                                <img width="290" height="180" src="img/7.webp">
                            </a>
                        </li>
                        <li>
                            <a class="pic">
                                <img width="290" height="180" src="img/8.webp">
                            </a>
                        </li>
                    </ul>
                    <ul id="marquee1_2"></ul>
                </div>
            </div>
        </div>
        <script type="text/javascript">marqueeStart(1,"left");</script>
    </div>
</div>
<%--<footer class="footer">--%>
<div id="footer">
    <div>
        <div class="conent_bq">
            <p>
                <%--                <a>航班信息功能</a>|--%>
                <%--&lt;%&ndash;                <a >用户信息</a>|&ndash;%&gt;--%>
                <%--                <a >消息通知</a>|--%>
                <%--                <a>密码修改</a>|--%>
                <%--                <a>退出系统</a>--%>
            <h2>✈️ 🛩️ 🛫 🛬 🪂  🚁 🚟 🚠 🚡 🛰️ 🚀 🛸</h2>
            </p>
            <p>版权 &copy;©22计科（校企）  张培霞 </p>
        </div>
    </div>
    <%--</footer>--%>

    <script src="js/jquery.js"></script>
    <script src="js/js.js"></script>
    <script src="js/time.js"></script>
</body>
</html>